mock.js使用 mock获取get、post请求参数

您所在的位置：网站首页 › mock无返回修改入参 › mock.js使用 mock获取get、post请求参数

mock.js使用 mock获取get、post请求参数

2024-07-13 07:18| 来源: 网络整理| 查看: 265

在开发过程中，有很多的ajax请求，前后端分离开发你肯定遇到这样的问题，后台给你的接口文档，你需要在本地模拟数据返回，可能你也用到过我之前用的蠢方法，就是新建一个test.json文件，放入接口文档中写的返回示例，这么做有个很大的问题是不够灵活，而且还需要切换url，现在学会使用mock.js拦截ajax请求，更加方便的构造你需要的假数据。

Mock.js官方地址 Mock.js 生成随机数据，拦截 Ajax 请求 mock.js语法规范

简单示例

在这里我举的例子是在vue项目中如何使用mock.js。

安装mockjs

npm install mockjs --save-dev

在项目中创建mock文件目录(用于拦截本地请求，使用mock.js随机生成数据)，并写一个简单的返回示例，后面拦截其他url的ajax请求直接参考这个示例。

//引入mockjs import Mock from 'mockjs' //使用mockjs模拟数据 Mock.mock('/\/api\/msdk\/proxy\/query_common_credit/', { "ret":0, "data": { "mtime": "@datetime",//随机生成日期时间 "score|1-800": 800,//随机生成1-800的数字 "rank|1-100": 100,//随机生成1-100的数字 "stars|1-5": 5,//随机生成1-5的数字 "nickname": "@cname",//随机生成中文名字 } //data里的属性看不懂，需要详细看语法规范,博客链接:https://www.cnblogs.com/jiaoshou/p/14162834.html });

main.js里面引入该文档 import './assets/js/mock'; //此部分引入的是我们上一步编写的mockjs文档

xxx.vue文件中调用mock.js中模拟的数据接口，这时返回的response就是mock.js中用Mock.mock(‘url’,data）中设置的data了。

query_common_credit(){ var loginMode = 'msdk';//游戏内默认msdk(wx|qq|msdk) var url = '/api/msdk/proxy/query_common_credit'; this.$axios.get(url) .then(response => { }) .catch(error => { }) } 拦截数据的方法Mock.mock()

这里我举例最常用的格式

Mock.mock(url,data);

url用正则写，这样get请求传参时，也能拦截数据了。

Mock.mock('/\/api\/msdk\/proxy\/query_common_credit/', { "ret":0, "data": { "mtime": "@datetime",//随机生成日期时间 "score|1-800": 800,//随机生成1-800的数字 "rank|1-100": 100,//随机生成1-100的数字 "stars|1-5": 5,//随机生成1-5的数字 "nickname": "@cname",//随机生成中文名字 } //data里的属性看不懂，需要详细看语法规范,博客链接:https://www.cnblogs.com/jiaoshou/p/14162834.html }); 设置延时请求到数据

不设置延时很有可能遇到坑，这里需要留意，因为真实的请求是需要时间的，mock不设置延时则是马上拿到数据返回，这两个情况不同可能导致在接口联调时出现问题。所以最好要先设置延时请求到数据。

//延时400s请求到数据 Mock.setup({ timeout: 400 }) //延时200-600毫秒请求到数据 Mock.setup({ timeout: '200-600' }) mock获取get、post请求参数 GET 请求获取参数

get请求如果带参数，请把接口url写为正则匹配，否则匹配不到就报错（Mock.mock(RegExp(API_URL.LOGIN + ".*")）

// get 普通匹配：只能匹配到 ${process.env.VUE_APP_API_BASE_URL}/api_admin/table ，这个路径，由于get请求参数是拼接在url后面的，所以这个是匹配不到的，这时我们需要改写成正则匹配 Mock.mock(`${process.env.VUE_APP_API_BASE_URL}/api_admin/table`, 'get', (options) => { let result = {}; return result; }); // get 正则匹配：这样get请求，带不带参数就都可以获取到了 Mock.mock(RegExp(`${process.env.VUE_APP_API_BASE_URL}/api_admin/table` + ".*"), 'get', (options) => { let result = {}; // 这样就可以获取到带参数的完整地址了，自己还需要再写个方法提取参数，网上有很多，mock没有内置 // http://localhost:3333/api_admin/table?userName=admin&passWord=8888889 console.log('mock', options.url); return result; }); // get 扩展，如果你每次写正则觉得麻烦，可以提到一个方法里，每天调用即可 /** * 将url改写成正则模式，mock匹配get请求路由时候使用，因为get请求参数是拼接在url后面，不用正则匹配不到 * @param {String} url * @returns {RegExp} */ function regUrl(url) { return RegExp(url + ".*"); } Mock.mock(regUrl(`${process.env.VUE_APP_API_BASE_URL}/api_admin/table`), 'get', (options) => { let result = {}; // 这样就可以获取到带参数的完整地址了，自己还需要再写个方法提取参数，网上有很多，mock没有内置 // http://localhost:3333/api_admin/table?userName=admin&passWord=8888889 console.log('mock', options.url); return result; }); POST 请求获取参数

post 请求获取参数，一般普通匹配就满足了，但是极少数会在路径拼接参数，这里就用正则匹配举例

// post 获取参数，一般普通匹配就满足了，但是极少数会在路径拼接参数，这里就用正则匹配举例 Mock.mock(regUrl(`${process.env.VUE_APP_API_BASE_URL}/api_admin/table`), 'post', (options) => { let result = {}; // options.body 就是post参数 console.log('mock', options.body); return result; });

options.body拿到这个其实就是获取到了参数，由于 post 请求参数方式有多种情况(不知道的可以访问下面链接)，后续取值略有不同，相信你应该知道怎么做的。

HTTP请求中Get、Post与后台参数接收的分析

【本文地址】

mock.js使用 mock获取get、post请求参数

mock.js使用 mock获取get、post请求参数

今日新闻

推荐新闻